<template>
    <el-row class="dataPanels" :gutter="15">
        <el-col class="h100" :span="6">
            <boxVue border>
                <div class="title">总订单数（件）</div>
                <div class="number">
                    <CountTo :startVal="0" :duration="1500" :endVal="state.data.total"></CountTo>
                </div>
            </boxVue>
        </el-col>
        <el-col class="h100" :span="6">
            <boxVue border>
                <div class="title">已交付（件）</div>
                <div class="number">
                    <CountTo :startVal="0" :duration="1500" :endVal="state.data.complete"></CountTo>
                </div>
            </boxVue>
        </el-col>
        <el-col class="h100" :span="6">
            <boxVue border>
                <div class="title">待处理（件）</div>
                <div class="number">
                    <CountTo :startVal="0" :duration="1500" :endVal="state.data.pending"></CountTo>
                </div>
            </boxVue>
        </el-col>
        <el-col class="h100" :span="6">
            <boxVue border>
                <div class="title">本月订单（件）</div>
                <div class="number">
                    <CountTo :startVal="0" :duration="1500" :endVal="state.data.thisMonth"></CountTo>
                </div>
            </boxVue>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive } from 'vue';
import boxVue from './box.vue';
import { CountTo } from 'vue3-count-to'
import request from '/@/utils/request'
const state = reactive({
    data: {
        total: 100,
        complete: 80,
        pending: 20,
        thisMonth: 100
    }
})
const getData = () => {
    // request({
    //     // 例如： /aaa/com,
    //     url: '${yourUrl}',
    //     method:'post',
    // }).then(res => {
    //     state.data = res;
    // })
}
getData()
</script>
<style lang="scss" scoped>
.dataPanels {
    height: 100%;

    .h100 {
        height: 100%;
    }

    .title {
        text-align: center;
        color: #fff;
        font-size: 16px;
        padding-top: 22px;
        // font-family: "huangyou", "方正粗黑宋简体", monospace;
    }

    .number {
        text-align: center;
        font-size: 64px;
        color: rgba(55, 255, 206, 1);
        white-space: nowrap;
        font-family: "站酷庆科黄油体", "方正粗黑宋简体", monospace;
    }
}
</style>